<template>
<div class="charts-border" style="height:500px;width:96%;margin-top:10px;">
  <v-chart
      :options="option"
      :autoresize="true"
      theme="chartsTheme"
    />
</div>
</template>
<script>
var bgImg = '';

var fillImg = '';
var chartData = [
    {
        name: '通信',
        value: 2691
    },
    {
        name: '网络',
        value: 5000
    },
    {
        name: '能源',
        value: 3416
    },
    {
        name: '建筑',
        value: 4666
    },
];

var bgData = [];
var itemData = [];

// 取出每一条数据value,作为显示数据
chartData.forEach(function(items, index) {
    itemData.push(items.value);
})

// 取出所有数据最大值,作为背景象形柱图数据
chartData.forEach(function(items, index) {
    bgData.push({
        name: items.name,
        value: Math.max.apply(null, itemData)
    });
})

console.log('bgdata:',bgData)

// 所有数据最大值
var maxValue = Math.max.apply(null, itemData);

// 字体 distance放大参数
var scale = 1;

//富文本配置
var rich = {
    white: {
        color: "#fff",
        align: 'left',
        fontSize: 18 * scale,
        padding: [0, 0]
    },
};

export default {
  components: {},
  data() {
    return {
      option: {
    backgroundColor: '#031f2d',
    tooltip:{
        formatter:'{b} : {c}',
    },
    grid: {
        left: '3%',
        right: '6%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data:(function(data){
            var arr=[];
            data.forEach(function(items){
                arr.push(items.name);
            });
            return arr;
        })(chartData),
        boundaryGap: ['20%', '20%'],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                fontSize: 16 * scale,
                color: '#3fdaff'
            }
        }
    }],
    yAxis: [{
        type: 'value',
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: true,
            inside: true,
            length: 10 * scale,
            lineStyle: {
                color: '#0b5263'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#0b5263',
                fontSize: 14 * scale
            }
        },
    }],
    series: [
        //背景
        {
            name: 'bg',
            type: 'pictorialBar',
            barWidth: '45%',
            // barGap: '0%',
            silent: true,
            label: {
                normal: {
                    show: true,
                    position: "top",
                    distance: 20 * scale,
                    formatter: function(params) {
                        console.log('params:', params)
                        var stuNum = 0;
                        chartData.forEach(function(value, index, array) {
                            if (params.name == value.name) {
                                stuNum = value.value;
                            }
                        })
                        return stuNum + '{white| 人}';
                    },
                    textStyle: {
                        color: "#ffc72b",
                        fontSize: 20 * scale
                    },
                    rich: rich
                }
            },
            symbol: 'image://'+ bgImg,
            symbolClip:false,
            symbolBoundingData: maxValue,
            symbolSize: [52, '100%'],
            // data: bgData
            data: [1000, 3000, 5000, 6000]
        },
        {
            name: '数据',
            type: 'pictorialBar',
            barWidth: '45%',
            barGap: '-100%',
            data: chartData,
            z: 3,
            symbol: 'image://'+ fillImg,
            symbolClip:true,
            symbolBoundingData: maxValue,
            symbolSize: [52, '100%']
        },
    ]
}
    }
  },
  watch: {},
  mounted() {},
  methods: {}
};
</script>

<style lang="less">
</style>

